<template>
  <div>
    <el-row :gutter="10">
    <el-col :span="12"><div class="left"></div></el-col>
    <el-col :span="12"><div class="right"></div></el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.left();
    this.right();
  },
  methods: {
    left() {
      const colors = ["#5470C6", "#EE6666"];
      let charts = echarts.init(document.querySelector(".left"));
      let option = {
        title: {
          text: "2020-2021年疫情感染情况",
          top: 10,
          textStyle:{
          fontSize:'16',
          }
        },
        color: colors,
        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          top: 10,
          right: 20,
           textStyle:{
          fontSize:'10',
          }
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "Precipitation  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            // prettier-ignore
            data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9', '2021-10', '2021-11', '2021-12'],
          },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "Precipitation  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            // prettier-ignore
            data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10', '2020-11', '2020-12'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "2020年1-12月疫情情况(2020)",
            type: "line",
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "2020年1-12月疫情情况(2021)",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3,
              0.7,
            ],
          },
        ],
      };
      charts.setOption(option);
    },
    // left

    //right
    right() {
      let charts = echarts.init(document.querySelector(".right"));
      let option = {
        title: {
          text: "实时预约状况",
          subtext: "Real-time reservation status",
          left: "center",
          top: 30,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: 30,
          top: 30,
        },
        series: [
          {
            name: "数据统计",
            type: "pie",
            radius: "55%",
            top: 55,
            data: [
              { value: 1048, name: "今日预约" },
              { value: 735, name: "今日来访" },
              { value: 580, name: "即将逾期" },
              { value: 484, name: "随时访问总人数" },
              { value: 300, name: "预约完成进度" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      charts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  box-sizing: border-box;
  padding: 10px;
}
.left{
  height: 700px;
  background-color: #fff;
}
.right{
   height: 700px;
   background-color: #fff;
}
</style>